<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../js/leaflet/leaflet.css"/>
    <script type="text/javascript" src="../js/echarts.js"></script>
    <script type="text/javascript" src="../js/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../js/leaflet/leaflet-heat.js"></script>

    <title>leaflet_map</title>
    <style>
        #map {
            width: 100%;
            height: 100%;
            border: 1px;
        }
    </style>
</head>

<body>

<div id="map"></div>
<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.10000.js"></script>
<script type="text/javascript">
    var map = L.map('map');
    var osmUrl = 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
        osmAttrib = 'wangchaojie',
        // osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
            minZoom: 1, maxZoom: 15
            /*  ,
              attribution: osmAttrib*/
        });

    var baseLayers = {
        "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234"
        }),
        '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: "1234"
        }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
            subdomains: "1234"
        })]),
        "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
            attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        }),
        "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
            attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        }),
        'GeoQ灰色底图': L.tileLayer('http://192.168.2.241:8090/tiles/{z}/{x}/{y}.png').addTo(map)
        //  'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
    };
    L.tileLayer('/tiles/{z}/{x}/{y}.png', {
        attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        key: 'BC9A493B41014CAABB98F0471D759707',
        styleId: 22677
    });

    var layercontrol = L.control.layers(baseLayers, {}, {
        position: "topleft"
    }).addTo(map);

    map.setView([31.60, 104.71], 6)
        .addLayer(osm);


    L.marker([35.19682, 114.67976]).addTo(map)
        .bindPopup("<b>姓名：王超杰</b><br />描述：帅哥.").openPopup();

    L.marker([35.19682, 110.67976]).addTo(map)
        .bindPopup("<b>姓名：王超杰</b><br />描述：帅哥.");

    L.circle([31.728, 104.677], 10000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");


    var div = L.DomUtil.create('div');
    var chart = echarts.init(div, '', {
        width: 500,
        height: 300
    });
    var option = {
        title: {
            text: '大数据全国城市平均薪资'
        },
        tooltip: {},
        legend: {
            data: ['工资']
        },
        xAxis: {
            data: ["北京", "上海", "广州", "深圳", "杭州", "武汉"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,

                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        yAxis: {},
        series: [{
            name: '薪资',
            type: 'bar',
            data: [25000, 26000, 20000, 20000, 24983, 18000]
        }]
    };
    chart.setOption(option);
    L.circle([37.728, 120.677], 10000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map).bindPopup(div, {maxWidth: 500});
    //     .bindPopup(function () {
    //     chart.setOption(option);
    //     return chart.getDom();
    // }, {maxWidth: 600});


    var content = L.DomUtil.create('p', 'custom-popup');
    showHeatmap()

    function showHeatmap() {
        // addressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });


        $.ajax({
            type: "get", //GET或POST,
            async: true, //默认设置为true，所有请求均为异步请求。
            url: "/friend/query",
            data: {},
            dataType: "json", //xml、html、script、jsonp、 json
            success: function (data) {
                var array = []
                for (i in data) {
                    array.push([data[i].lat, data[i].lng,data[i].lat])
                }


                var heat = L.heatLayer(array,{radius: 25,max:180}).addTo(map);
            },
            error: function () {
                alert("错误")
            },
        });

    }

    function insert() {
        var name = $("#stuname").val()
        var addr = $("#addr").val()
        var remark = $("#remark").val()
        var lng = $("#lngb1").text()
        var lat = $("#latb1").text()
        $.ajax({
            type: "post", //GET或POST,
            async: true, //默认设置为true，所有请求均为异步请求。
            url: "/friend/insert",
            data: {
                name: name,
                address: addr,
                remark: remark,
                lng: lng,
                lat: lat
            },
            dataType: "json", //xml、html、script、jsonp、 json
            success: function (data) {
                if (data) {
                    query()
                }
            },
            error: function () {
                alert("错误")
            },
        });
    }

    var popup = L.popup();

    function onMapClick(e) {
        var v = e.latlng.toString()
        var lat = e.latlng.lat.toString()
        var lng = e.latlng.lng.toString()
        content.innerHTML = "<b>经度：</b><b id='lngb1'>" + lng + "</b>" + "<br/>" + "<b>纬度：</b><b id='latb1'>" + lat + "</b>" + "<br/>" +
            "<br><label title='名字' for='stuname' >名称：</label><input id='stuname'></input><br>" +
            "<br><label>家乡：</label><input id='addr'></input><br>" +
            "<br><label>描述：</label><input id='remark'></input><br>" +
            "<button title='确定' style='text-align: right;margin-left:160px;margin-top:10px' onclick=insert()>确定</button>"

        popup
            .setLatLng(e.latlng)
            .setContent(content)
            .openOn(map);

    }

    map.on('click', onMapClick);


    var greenIcon = L.icon({
        iconUrl: '/html/leaf-green.png',
        // shadowUrl: '/html/leaflet/leaf-green.png',

        iconSize: [38, 95], // size of the icon
        // shadowSize: [50, 64], // size of the shadow
        iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
        // shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
        denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
        aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
        golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
    var cities = L.layerGroup([littleton, denver, aurora, golden]);

    /*    var overlayMaps = {
            "西部：": cities
        };
        L.control.layers(overlayMaps).addTo(map);*/


    function query() {
        arrayName = new Array();
        arrayValue = new Array()
        $.ajax({
            type: "get", //GET或POST,
            async: true, //默认设置为true，所有请求均为异步请求。
            url: "/friend/query",
            data: {},
            dataType: "json", //xml、html、script、jsonp、 json
            success: function (data) {
                var array = []
                for (i in data) {
                   /* var mark = L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map)
                        .bindPopup("<b>姓名：</b>" + data[i].name + "<br /><b>家乡：</b>" + data[i].address +
                            "<br/><b>描述：</b>" + data[i].remark).openPopup();*/
                    var mark = L.marker([data[i].lat, data[i].lng]).addTo(map)
                        .bindPopup("<b>姓名：</b>" + data[i].name + "<br /><b>家乡：</b>" + data[i].address +
                            "<br/><b>描述：</b>" + data[i].remark).openPopup();
                    array.push(mark)
                }
                var cities1 = L.layerGroup(array);
                var overlayMaps = {
                    "城市：": cities1,
                    "西部：": cities
                };
                // L.control.layers({}, overlayMaps, {position: "topleft"}).addTo(map);

            },
            error: function () {
                alert("错误")
            },
        });
    }

    $(document).ready(function () {
        query()

    });
</script>

</body>

</html>